<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: space-between;
        }
        li{
            padding: 5px 15px;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <router-link tag="li" to="/">页面一</router-link>
            <router-link tag="li" to="/page2">页面二</router-link>
            <router-link tag="li" to="/page3">页面三</router-link>
            <router-link tag="li" to="/page4">页面四</router-link>
        </ul>
        <router-view></router-view>
    </div>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script>
        // 全局路由守卫（全局前置守卫 beforeEach 全局后置守卫afterEach 全局解析守卫 beforeResolve） 
        // 组件内守卫 (beforeRouteEnter beforeRouteUpdate beforeRouteLeave)
        // 路由独享守卫(beforeEnter)
        const page1 = {
            template: `
                <div>这是页面1</div>
            `,
            // 组件内守卫 路由进入之前触发的守卫
            beforeRouteEnter (to, from, next) {
                // ...
                // console.log(this)
                next(function(vm) {
                    console.log(vm)
                })
            },
            // 路由更新时触发的守卫
            beforeRouteUpdate(to, from, next) {

            },
            // 路由离开时触发的守卫
            beforeRouteLeave (to, from, next) {
                // ...
            }
        }
        const page2 = {
            template: `
                <div>这是页面2</div>
            `
        }
        const page3 = {
            template: `
                <div>这是页面3</div>
            `
        }
        const page4 = {
            template: `
                <div>这是页面4</div>
            `
        }
        let router = new VueRouter({
            routes: [
                {
                    path: '/',
                    component: page1
                },
                {
                    path: '/page2',
                    component: page2
                },
                {
                    path: '/page3',
                    name: 'page3',
                   
                    component: page3
                },
                {
                    path: '/page4',
                    // beforeEnter: (to, from, next) => {
                    //     // ...
                    //     // alert('进入路由独享守卫')
                    //     next()
                    // },
                    component: page4
                }
            ]
        })
        // router.beforeEach((to, from, next) => {
        //     alert('路由全局前置守卫')
        //     // to要进入的页面的路由对象 from是要离开的页面的路由对象 next是执行下一步
        //     if(to.name == "page3") {
        //         // 所有的路由跳转规则在next中同样适用
        //         next({
        //             path: '/page2',
        //             query: {
        //                 from: 'page3'
        //             }
        //         })
        //     } else {
        //         next()
        //     }
        // })
        // router.beforeResolve((to, from, next) => {
        //     // alert('进入全局解析守卫')
        //     // to and from are both route objects. must call `next`.
        //     next()
        // })
        
        // router.afterEach((to, from) => {
        //     alert('进入全局后置守卫')
        //     // to and from are both route objects.
        // })
        new Vue({
            el: '#app',
            router
        })
    </script>
</body>
</html>